<template>
  <div>
    <!-- <MainNavBar>
      <template #center-name> 首页 </template> 
    </MainNavBar> -->
    <div class="container">
      <div class="wrapper" id="wrapper">
        <div class="header">
          <div class="cup">
            <img src="../../assets/images/cup.png" alt="" />
          </div>
          <div class="name"><i>杨威</i><i>杯</i></div>
        </div>
        <div class="body">
          <!-- <div class="top">全国首届体操通级比赛</div>
          <div class="bottom">暨全国亲子体操比赛</div> -->
        </div>
        <div class="img-date">
          <img src="../../assets/images/2021.png" alt="2021">
        </div>
        <div class="text-date">2021.06.01 - 12.31</div>
        <!-- <div class="date">
          <span class="top">
            <img src="http://qnticao.laigl.com/vue/c5233849c15ae382bdee8e57b8fbe4f.png" alt="2021">
          </span>
          <span class="bottom">2021年6月1日——12月31日</span>
          <span class="line"></span>
        </div> -->
        <!-- <div class="name">
          <span class="info">
            <img
              src="../../assets/images/eebbded9913fe9fb75e50789843342d.png"
              alt=""
            /></span
          >
        </div> -->
        <!-- <div class="ball">
          <div class="top"></div>
          <div class="bottom"></div>
        </div> -->
        <!-- <div class="roll">
          <div class="left">
            <img src="http://qnticao.laigl.com/vue/roll.png" alt="" />
          </div>
          <div class="right"></div>
        </div> -->
        <!-- <div class="point">
          <div class="top"></div>
          <div class="middle"></div>
          <div class="bottom"></div>
        </div> -->
        <div class="goto-sign" @click="goToOtherPage('sign')">
            <span>去  报  名</span>
            <span
              ><img src="../../assets/images/goSign.png" alt=""
            /></span>
          </div>
        <div class="sign">
          <!-- <div class="icon-left">
            <img src="http://qnticao.laigl.com/vue/icon-left.png" alt="" />
          </div> -->
          <!-- <div class="icon-right">
            <img src="http://qnticao.laigl.com/vue/icon-right.png" alt="" />
          </div> -->
          
          <div class="main">
            <div class="match" @click="goToOtherPage('match')">
              <div class="img">
                <img src="http://qnticao.laigl.com/vue/matchRules.png" alt="" />
              </div>
              <div>赛事规程</div>
            </div>
            <div class="profile" @click="goToOtherPage('profile')">
              <div class="img">
                <img src="http://qnticao.laigl.com/vue/profile.png" alt="" />
              </div>
              <div>个人中心</div>
            </div>
            <div class="score" @click="goToOtherPage('score')">
              <div class="img">
                <img src="http://qnticao.laigl.com/vue/socreQuery.png" alt="" />
              </div>
              <div>成绩查询</div>
            </div>
          </div>
          <div class="circle"></div>
          <div class="circle2"></div>
          <div class="left-star"></div>
          <div class="right-star"></div>
        </div>
        <div class="footer">
          <!-- <div class="group2">
            <img src="http://qnticao.laigl.com/vue/group2.png" alt="" />
          </div> -->
          <div class="group1">
            <img src="http://qnticao.laigl.com/vue/group1.png" alt="" />
          </div>
          <div class="header">
            <img src="http://qnticao.laigl.com/vue/header.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import MainNavBar from "@/components/common/nav/MainNavBar.vue";
import { request } from "@/network/request.js";
import { useRouter } from "vue-router";
import { computed, onMounted,ref } from "vue";
import { Toast } from "vant";
export default {
  name: "Home",
  components: {
    MainNavBar,
  },
  setup() {
    
    const router = useRouter();
    const goToOtherPage = (type) => {
      switch (type) {
        case "sign":
          router.push("/sign");
          break;
        case "match":
          router.push("/matchRules");
          break;
        case "profile":
          router.push("/profile");
          break;
        case "score":
          router.push("/scoreinquiry");
          break;
      }
    };
          const sq = async () => {
      let locationUrl = "http://tc.weilang.top/vue";
      let token = sessionStorage.getItem("token") || false; // 从内存取得token
      if (!token) {
        // 内存内没有openid
        // 检测是否参数内有code，若有则跳接口获取openid，若没有则跳授权页
        console.log("内存内没有token");
        if (window.location.href.indexOf("code") >= 0) {
          /code=(.*)&state/.test(window.location.href);
          const code = RegExp.$1;
          sessionStorage.setItem("code", code);
          const res = await request({
            url: "v1/ucenter/doLogin",
            data: {
              code,
            },
          });
          if (res.code === 200) {
            console.log("可以存储token了");
            const { token, openid } = res.data;
            sessionStorage.setItem("token", String(token));
            sessionStorage.setItem("openid", String(openid));
            // window.location.href = "http://tc.weilang.top/vue/";
          } else {
            Toast(res.msg);
          }
        } else {
          // 链接里没有code
          console.log("链接里没有code");
          let redirectHref =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            "wxd6d5d17a0f9a09d2" +
            "&redirect_uri=" +
            encodeURIComponent(locationUrl) +
            "&response_type=code&scope=snsapi_userinfo&state=STATE" +
            "#wechat_redirect";
          console.log("请求授权地址" + redirectHref);
          window.location.href = redirectHref; // 跳转微信链接获取code和state（state没啥用目前暂时）
        }
      } else {
        // 内存里有openid
        console.log("内存里有token");
        // let member = {};
        // member.nickName = localStorage.getItem("nickName");
        // member.userHeadimg = localStorage.getItem("userHeadimg");
        // member.amount = localStorage.getItem("amount");
        // member.user_id = localStorage.getItem("user_id");
        // localStorage.setItem("userInfo", JSON.stringify(member));
      }
    };
    // const height = ref("");
  //  const height = ()=>{
  //     window.getComputedStyle(document.querySelector("#wrapper")).height
  //   }
    onMounted(() => {
      sq();
          // height.value = window.getComputedStyle(document.querySelector("#wrapper")).height;
          // sessionStorage.setItem("token" , "a9756505c57e3d2a8b1fcfbdf6c5aed3");
          // sessionStorage.setItem("openid", "oO2yA1fX5KxzSSgq5D83DZO5AcRw");
    });
    return {
      goToOtherPage,
      // height
    };
  },
};
</script>
<style lang="less" scoped>
.container {
  .wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    // top: -9.067vw;
    & > .header {
      display: flex;
      align-items: center;
      margin-top: 8vw;
      margin-left: 10.4vw;
      .cup {
        width: 24.8vw;
        margin-right: 4.8vw;
        img {
          width: 24.8vw;
          vertical-align: middle;
        }
      }
      .name{
        color: #fdcc00;
        font-weight: 600;
        text-shadow: 2px 0 3px #000;;
        i:nth-child(1){
            font-size: 16vw;
        }
        i:nth-child(2){
            font-size: 13.333vw;
        }
      }
    }
    .body{
      width: 77.867vw;
      height: 14.267vw;
      margin: 5.333vw auto 0 auto;
      background-image: url("../../assets/images/373eae7c2575928f793649201fa3d4c.png");
      background-size: contain;
      background-repeat: no-repeat;
      // color: transparent;
      // -webkit-text-stroke: 0.1px #003971;
      // -moz-text-stroke:0.1px #003971;
      // text-shadow: 1px 0 42px #003971 ,-1px 0 42px #003971;
      // font-weight :600;
      //  -webkit-font-smoothing:antialiased;
      // .top{
      //   width: 71.733vw;
      //   font-size: 6.667vw;
      //   margin-bottom: 3.2vw;
      //   -webkit-background-clip: text;
      //   background-clip: text;
      //   -webkit-text-fill-color: transparent;
      //   background-image: linear-gradient(to right, #febf4e  0 ,  #fff845 100%);
      // }
      // .bottom{
      //   width: 44.8vw;
      //     font-size: 4.8vw;
      //   -webkit-background-clip: text;
      //   background-clip: text;
      //   -webkit-text-fill-color: transparent;
      //   background-image: linear-gradient(to right, #febf4e  0 ,  #fff845 100%);
      // }
    }
    .img-date{
      position: absolute;
      left: 39.867vw;
      top: 48vw;
      img{
        width: 49.333vw;
      }
    }
    .text-date{
      font-size: 3.733vw;
      color: rgba(255, 255, 255, .7);
      margin-left: 10.667vw;
      margin-top: 4.267vw;
    }
  }
  width: 100%;
  height: 100vh;
  margin-top: -13.333vw;
  background-image: url("http://qnticao.laigl.com/vue/profile_bg_big.jpg");
  // background-size: contain;
  background-size: 100% auto;
  background-repeat: repeat;
  background-color: #0054a6;
  position: relative;
  // overflow: hidden;
  .date {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 48.8vw;
    height: 27.733vw;
    margin-top: 5.333vw;
    margin-left: 5.867vw;
    padding-top: 9.6vw;
    .top {
      color: #fff;
      width: 48.8vw;
      // font-size: 21.333vw;
      // font-style: oblique;
      font-style: italic;
      font-family: YouSheBiaoTiHei;
      // line-height: 27.733vw;
      letter-spacing: -1.6vw;
      font-weight: 600;
      margin-left: 1.333vw;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
    .bottom {
      z-index: 116;
      position: absolute;
      left: 1.867vw;
      top: 19.467vw;
      width: 45.867vw;
      display: block;
      overflow-wrap: break-word;
      color: rgba(154, 243, 191, 1);
      font-size: 3.733vw;
      font-family: PingFangSC-Semibold;
      line-height: 5.333vw;
      text-align: center;
      letter-spacing: -0.267vw;
    }
    .line {
      z-index: 117;
      position: absolute;
      left: 3.467vw;
      top: 26.667vw;
      width: 10.667vw;
      height: 0.533vw;
      background-color: rgba(150, 239, 191, 1);
    }
  }
  .name {
    .main-name {
      z-index: 130;
      position: absolute;
      left: 1.867vw;
      top: 43.467vw;
      width: 85.867vw;
      display: block;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 8vw;
      font-family: REEJI-BigYoung-BoldGB2.0-Regular;
      line-height: 10.133vw;
      text-align: left;
      text-shadow: 0vw 0.533vw 1.067vw rgba(6, 69, 130, 1);
    }
    .info {
      z-index: 129;
      position: absolute;
      left: 6.133vw;
      top: 37.333vw;
      width: 85.867vw;
      display: block;
      overflow-wrap: break-word;
      color: rgba(255, 255, 255, 1);
      font-size: 8vw;
      font-family: REEJI-BigYoung-BoldGB2.0-Regular, "微软雅黑";
      line-height: 10.133vw;
      text-align: left;
      text-shadow: 0vw 0.533vw 1.067vw rgba(6, 69, 130, 1);
      margin-left: -2.667vw;
      img {
        width: 100%;
        vertical-align: middle;
      }
    }
  }
  .ball {
    position: absolute;
    left: 66.133vw;
    top: 32.067vw;
    .top {
      position: absolute;
      left: 1.333vw;
      top: -2.667vw;
      z-index: 1;
      width: 10.4vw;
      height: 10.4vw;
      background: linear-gradient(to right, #0054a6 0%, #a0f9c0 100%);
      border-radius: 50%;
    }
    .bottom {
      position: absolute;
      width: 26.4vw;
      height: 26.4vw;
      background: linear-gradient(32deg, #0054a6 0%, #f19a96 100%);
      border-radius: 50%;
    }
  }
  .roll {
    position: absolute;
    left: 0;
    top: 58.667vw;
    .left {
      width: 12vw;
      height: 16.267vw;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right {
      position: absolute;
      right: 0;
      bottom: 0.267vw;
      width: 5.067vw;
      height: 5.067vw;
      border-radius: 50%;
      background: linear-gradient(116deg, #a0f9c0 0%, #0054a6 100%);
    }
  }
  .point {
    position: absolute;
    left: 69.333vw;
    top: 71.667vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top,
    .middle,
    .bottom {
      margin-bottom: 1.333vw;
      border-radius: 50%;
      opacity: 0.69;
      background-color: #fccf00;
    }
    .top {
      width: 0.8vw;
      height: 0.8vw;
    }
    .middle {
      width: 1.333vw;
      height: 1.333vw;
    }
    .bottom {
      width: 1.867vw;
      height: 1.867vw;
    }
  }
   .goto-sign {
      position: absolute;
      left: 5.866vw;
      top: 76.6vw;
      width: 48vw;
      height: 12vw;
      line-height: 12vw;
      background-color: #fccf00;
      line-height: 10.133vw;
      text-align: center;
      // box-shadow: 0vw 1.6vw 2.667vw 0vw rgba(252, 207, 0, 0.5);
      border-radius: 4.8vw;
      color: #fff;
      font-size: 6.933vw;
      z-index:1;
      span{
        display: inline-block;
        height: 100%;
        line-height: 12vw;
      }
      & img {
        vertical-align: middle;
        width:9.067vw;
        margin-left: 2.667vw;
        margin-bottom: 0.533vw;
      }
    }
  .sign {
    position: absolute;
    display: flex;
    top: 81.667vw;
    left: 9.333vw;
    right: 5.867vw;
    width: 83.2vw;
    height: 45.867vw;
    background-color: #fff;
    border-radius: 3.2vw;
    overflow: hidden;
    .left-star,.right-star{
      width: 5.333vw;
      height: 16vw;
      background-image: url("../../assets/images/star.png");
      background-size: 100%;
      position: absolute;
    }
    .left-star{
      left: 3.2vw;
      top: 11.333vw;
    }
    .right-star{
      right: 3.467vw;
      top: 17.333vw;
    }
    .circle{
      position: absolute;
      bottom: 2vw;
      left: 12.533vw;
      width: 10.133vw;
      height: 10.133vw;
      border-radius: 50%;
      -webkit-appearance: none;
      background-color: #ccdded;
    }
    .circle2{
      position: absolute;
      width: 16vw;
      height: 16vw;
      background-color: #ccdded;
      border-radius: 50%;
      -webkit-appearance: none;
      right: -8vw;
      top: -2.667vw;
    }
    .icon-left {
      position: absolute;
      left: 1.867vw;
      top: -4.533vw;
      img {
        width: 12.8vw;
        height: 17.6vw;
      }
    }
    .icon-right {
      position: absolute;
      right: -0.267vw;
      bottom: -8vw;
      img {
        width: 12.8vw;
        // height: 17.6vw;
      }
    }
   
    .main {
      width: 66.667vw;
      margin: 0 auto;
      margin-top: -3.333vw;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 3.733vw;
      color: rgba(0, 84, 166, 1);
      .match,
      .profile,
      .score {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
        text-align: center;
      }
      .img {
        width: 12.533vw;
        height: 12.533vw;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        border: 0.267vw solid #0054a6;
        background-color: rgba(0, 84, 166, 0.11);
        box-shadow: 0 1.6vw 2.667vw 0 rgba(0, 84, 166, 0.2);
        margin-bottom: 1.333vw;
        & img {
          width: 5.6vw;
          vertical-align: middle;
          // height: 6.4vw;
        }
      }
    }
  }
  .footer {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 55.2vw;
    top: 135vw;
    left: 22.4vw;
    right: 22.4vw;
    .group2 {
      width: 18.133vw;
      height: 15.467vw;
      img {
        height: 100%;
        height: 100%;
      }
    }
    .group1 {
      width: 13.333vw;
      height: 15.467vw;
      margin-right: 4.533vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .header {
      width: 14.933vw;
      height: 15.467vw;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
